<script setup>
import Selector from "@/components/Selector.vue";
import standard_double from "@/assets/标准大床房.png"
import superior_double from "@/assets/高级大床房.png"
import business_double from "@/assets/商务大床房.png"
import standard_twin from "@/assets/标准双床房.png"
import superior_twin from "@/assets/高级双床房.png"
import business_twin from "@/assets/商务双床房.png"
import standard from "@/assets/标准间.png"
import standard_family from "@/assets/标准家庭房.png"
import superior_family from "@/assets/高级家庭房.png"
import TimeSelector from "@/components/TimeSelector.vue";
import { ElMessage } from 'element-plus';
import instance from "@/utils/request.js";
import { useUserStore } from "@/stores/user.js";
import router from "@/router/router.js";
import Inputter from "@/components/Inputter.vue";

// 用户首页
onMounted(() => {
  init();
});

const login = inject("login");
const message = inject("message");

const user = useUserStore();

let room_type = ref("");
let stay_start_time = ref("");
let stay_end_time = ref("");

let standard_double_count = ref("");
let superior_double_count = ref("");
let business_double_count = ref("");
let standard_twin_count = ref("");
let superior_twin_count = ref("");
let business_twin_count = ref("");
let standard_count = ref("");
let standard_family_count = ref("");
let superior_family_count = ref("");

let standard_double_price = ref("");
let superior_double_price = ref("");
let business_double_price = ref("");
let standard_twin_price = ref("");
let superior_twin_price = ref("");
let business_twin_price = ref("");
let standard_price = ref("");
let standard_family_price = ref("");
let superior_family_price = ref("");

const selected = ref("全部");
const dialogVisible = ref(false);

const count = ref("1");
const stay_name_1 = ref("");
const stay_name_2 = ref("");
const stay_name_3 = ref("");
const stay_name_4 = ref("");
const stay_name_5 = ref("");

const count_options = [
  { value:'1', label:'1' },
  { value:'2', label:'2' },
  { value:'3', label:'3' },
  { value:'4', label:'4' },
  { value:'5', label:'5' }
];

const options = [
  { value:'全部', label:'全部' },
  { value:'标准间', label:'标准间' },
  { value:'大床房', label:'大床房' },
  { value:'双床房', label:'双床房' },
  { value:'家庭房', label:'家庭房' }
];

function open(type) {
  // 打开选择时间对话框
  //console.log(room_type);

  if(user.user_id === null) {
    ElMessage({
      message: "请先登录！",
      type: "info"
    });
    login();
  }
  else {
    instance.request({
      url: 'user/index/check',
      method: 'POST',
      data: {
        user_id: user.user_id
      },
      headers: { "User-Id": user.user_id }
    })
        .then(function(response) {
          if(response.data.code === "ERROR_CUSTOMER") {
            ElMessage({
              message: "请先完善个人信息！",
              type: "info"
            });
            message();
          }
          if(response.data.code === "SUCCESS") {
            room_type.value = type;
            dialogVisible.value = true;
          }
        })
        .catch(function(error){
          console.log(error);
          if(error.response.request.status === 401) {
            ElMessage({
              message: "您的连接已被注销！",
              type: "error"
            });
            user.logout();
            router.push("/user/index");
            return;
          }
          ElMessage({
            message: "预订失败！",
            type: "error"
          });
        });
  }
}

function close() {
  // 关闭选择时间对话框
  dialogVisible.value = false;

  // 清空所选属性
  room_type.value = "";
  stay_start_time.value = "";
  stay_end_time.value = "";
}

function init() {
  // 初始化
  instance.request({
    url: 'user/index/init',
    method: 'POST'
  })
      .then(function(response) {
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "初始化失败！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          standard_double_count.value = response.data.data[0].standard_double_count;
          superior_double_count.value = response.data.data[0].superior_double_count;
          business_double_count.value = response.data.data[0].business_double_count;
          standard_twin_count.value = response.data.data[0].standard_twin_count;
          superior_twin_count.value = response.data.data[0].superior_twin_count;
          business_twin_count.value = response.data.data[0].business_twin_count;
          standard_count.value = response.data.data[0].standard_count;
          standard_family_count.value = response.data.data[0].standard_family_count;
          superior_family_count.value = response.data.data[0].superior_family_count;
          standard_double_price.value = response.data.data[0].standard_double_price;
          superior_double_price.value = response.data.data[0].superior_double_price;
          business_double_price.value = response.data.data[0].business_double_price;
          standard_twin_price.value = response.data.data[0].standard_twin_price;
          superior_twin_price.value = response.data.data[0].superior_twin_price;
          business_twin_price.value = response.data.data[0].business_twin_price;
          standard_price.value = response.data.data[0].standard_price;
          standard_family_price.value = response.data.data[0].standard_family_price;
          superior_family_price.value = response.data.data[0].superior_family_price;
        }
      })
      .catch(function(error){
        console.log(error);
        ElMessage({
          message: "初始化失败！",
          type: "error"
        });
        setTimeout(() => {
          init();
        }, 2000 );
      });
}

function book() {
  // 预订客房
  dialogVisible.value = false;
  const name = [
    stay_name_1.value,
    stay_name_2.value,
    stay_name_3.value,
    stay_name_4.value,
    stay_name_5.value,
  ]

  instance.request({
    url: 'user/index/book',
    method: 'POST',
    data: {
      user_id: user.user_id,
      room_type: room_type.value,
      stay_start_time: stay_start_time.value.toLocaleString(),
      stay_end_time: stay_end_time.value.toLocaleString(),
      stay_name_all: name,
      count: count.value
    },
    headers: { "User-Id": user.user_id }
  })
      .then(function(response) {
        console.log(response);
        if(response.data.code === "ERROR") {
          ElMessage({
            message: "预订失败！",
            type: "error"
          });
        }
        if(response.data.code === "ERROR_CUSTOMER") {
          ElMessage({
            message: "请先完善个人信息！",
            type: "error"
          });
        }
        if(response.data.code === "SUCCESS") {
          ElMessage({
            message: "预订成功！",
            type: "success"
          });
          router.push("/user/center/roommessage/roommanage");
        }
      })
      .catch(function(error){
        if(error.response.request.status === 401) {
          ElMessage({
            message: "您的连接已被注销！",
            type: "error"
          });
          user.logout();
          router.push("/user/index");
          return;
        }
        ElMessage({
          message: "预订失败！",
          type: "error"
        });
      });
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      align-center
      width="18%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
  >
    <span style="color:red;">*</span>
    <span style="color:#2a3441;">入住时间：</span>
    <time-selector v-model="stay_start_time"/><br>
    <span style="color:red;">*</span>
    <span style="color:#2a3441;">退房时间：</span>
    <time-selector v-model="stay_end_time"/>
    <span v-if="stay_end_time <= stay_start_time"
        style="color:red;">退房时间不能早于入住时间！</span>
    <br><span style="color:red;">*</span>
    <span style="color:#2a3441;">客房数量：</span>
    <br><selector :options="count_options" width="220" v-model="count"></selector>

    <template v-if="count >= 1">
      <br><span style="color:red;">*</span>
      <span style="color:#2a3441;">入住人1：</span>
    <br><inputter width="220" v-model="stay_name_1"></inputter>
    </template>

    <template v-if="count >= 2">
      <br><span style="color:red;">*</span>
      <span style="color:#2a3441;">入住人2：</span>
      <br><inputter width="220" v-model="stay_name_2"></inputter>
    </template>

    <template v-if="count >= 3">
      <br><span style="color:red;">*</span>
      <span style="color:#2a3441;">入住人3：</span>
      <br><inputter width="220" v-model="stay_name_3"></inputter>
    </template>

    <template v-if="count >= 4">
      <br><span style="color:red;">*</span>
      <span style="color:#2a3441;">入住人4：</span>
      <br><inputter width="220" v-model="stay_name_4"></inputter>
    </template>

    <template v-if="count >= 5">
      <br><span style="color:red;">*</span>
      <span style="color:#2a3441;">入住人5：</span>
      <br><inputter width="220" v-model="stay_name_5"></inputter>
    </template>

    <div class="cancel-confirm">
      <el-button color="#568fc1" plain @click="close">
        <span>取消</span>
      </el-button>
      <el-button :disabled="stay_end_time <= stay_start_time"
          color="#568fc1" class="button-color" @click="book">
        <span>确认</span>
      </el-button>
    </div>
  </el-dialog>

  <div class="select">
    <span>类型：</span>
    <selector :options="options" width="180" v-model="selected" />
  </div>
  <div class="main">
    <div class="grid-container">
      <div v-if="selected === '全部'|| selected === '大床房'"
           class="content" @click="open('标准大床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="standard_double"/>
        <span>标准大床房</span><br>
        <span class="price">价格：{{ standard_double_price }}</span>
        <span>余量：{{ standard_double_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '大床房'"
           class="content" @click="open('高级大床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="superior_double"/>
        <span>高级大床房</span><br>
        <span class="price">价格：{{ superior_double_price }}</span>
        <span>余量：{{ superior_double_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '大床房'"
           class="content" @click="open('商务大床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="business_double"/>
        <span>商务大床房</span><br>
        <span class="price">价格：{{ business_double_price }}</span>
        <span>余量：{{ business_double_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '双床房'"
           class="content" @click="open('标准双床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="standard_twin"/>
        <span>标准双床房</span><br>
        <span class="price">价格：{{ standard_twin_price }}</span>
        <span>余量：{{ standard_twin_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '双床房'"
           class="content" @click="open('高级双床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="superior_twin"/>
        <span>高级双床房</span><br>
        <span class="price">价格：{{ superior_twin_price }}</span>
        <span>余量：{{ superior_twin_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '双床房'"
           class="content" @click="open('商务双床房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="business_twin"/>
        <span>商务双床房</span><br>
        <span class="price">价格：{{ business_twin_price }}</span>
        <span>余量：{{ business_twin_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '标准间'"
           class="content" @click="open('标准间')">
        <el-image  style="width: 35vh; height: 28vh;" :src="standard"/>
        <span>标准间</span><br>
        <span class="price">价格：{{ standard_price }}</span>
        <span>余量：{{ standard_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '家庭房'"
           class="content" @click="open('标准家庭房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="standard_family"/>
        <span>标准家庭房</span><br>
        <span class="price">价格：{{ standard_family_price }}</span>
        <span>余量：{{ standard_family_count }}间</span>
      </div>

      <div v-if="selected === '全部'|| selected === '家庭房'"
           class="content" @click="open('高级家庭房')">
        <el-image  style="width: 35vh; height: 28vh;" :src="superior_family"/>
        <span>高级家庭房</span><br>
        <span class="price">价格：{{ superior_family_price }}</span>
        <span>余量：{{ superior_family_count }}间</span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.select {
  padding-top: 2%;
  padding-left: 75%;
  /* border: 1px solid black; */
}
.main {
  padding-top: 0;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 1%;
  /* border: 1px solid black; */
}
.grid-container {
  display: grid;
  margin-top: 5vh;
  grid-template-columns: auto auto auto;
  grid-row-gap: 5vh;
  /* border: 1px solid black; */
}
.content {
  cursor: pointer;
  height: 35vh;
  width: 35vh;
  background-color: #f0f0f0;
  /* border: 1px solid black; */
}
.price {
  display: inline-block;
  width: 20vh;
}
.cancel-confirm {
  padding-top: 1vh;
  text-align: center;
}
.button-color {
  --el-button-hover-bg-color: rgb(238, 244, 249) !important;
  --el-button-hover-text-color: #568fc1 !important;
  --el-button-text-color: white !important;
}
</style>